<template>
  <div id="wrapper">
        <!-- <div class="top-header border-bottom fixed-top">
            <div class="top-back">
                <a href="javascript:history.go(-1)"></a>
            </div>
            <h2 class="f36">双12年终盛典</h2>
        </div> -->
        <div class="doudle12-app-hongbao">
            <div class="top-bg"></div>
            <div class="container">
                <div class="hongbao-box-title"></div>
                <div class="hongbao-box">
                    <div class="hongbao-content bg-fff">
                        <div class="hongbao-content-item clearfix" v-for="(item,index) in moneyList" key="item.monId" v-bind:class="item.class">
                            <div class="hongbao-size fl">
                                <span class="rmb-unit">￥</span>
                                <span class="rmb-price">{{item.money}}</span>
                            </div>
                            <div class="hongbao-explain fr">
                                <p class="hongbao-time color-fff f28">开抢时间：12月{{item.time}}号</p>
                                <div class="get-hongbao-btn" @click="isLogin(item.monId,item.click)"></div>
                                <p class="hongbao-num color-fff f28">限量{{item.num}}份，领完即止</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="hongbao-rule">
                    <h1 class="rule-title f36 fontbold color-fff">活动规则：</h1>
                    <div class="rule-line clearfix">
                        <div class="num-circle fl text-center">
                            <span class="fontarial color-fff f24">1</span>
                        </div>
                        <p class="rule-detail f28 color-fff fl">双12红包领取时间为12月8日-12月12日，使用时间为12月8日-12月31日；</p>
                    </div>
                    <div class="rule-line clearfix">
                        <div class="num-circle fl text-center">
                            <span class="fontarial color-fff f24">2</span>
                        </div>
                        <p class="rule-detail f28 color-fff fl">每个用户每种红包限领一个，且使用红包需满足红包使用限制和规则；</p>
                    </div>
                    <div class="rule-line clearfix">
                        <div class="num-circle fl text-center">
                            <span class="fontarial color-fff f24">3</span>
                        </div>
                        <p class="rule-detail f28 color-fff fl">请注意，App版本低于2.7.0的无法使用活动红包哦；</p>
                    </div>
                    <div class="rule-line clearfix">
                        <div class="num-circle fl text-center">
                            <span class="fontarial color-fff f24">4</span>
                        </div>
                        <p class="rule-detail f28 color-fff fl">活动咨询QQ：343045173（工作时间9:00-18:00）；</p>
                    </div>
                    <div class="rule-line clearfix">
                        <div class="num-circle fl text-center">
                            <span class="fontarial color-fff f24">5</span>
                        </div>
                        <p class="rule-detail f28 color-fff fl">在法律允许范围内，本次活动最终解释权归5173.com所有。</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 领取（成功）红包弹框 -->
        <div class="get-hongbao-bomb" v-show="hbSuccess">
            <i class="icon-close" @click="hbSuccess = false,isMaskdiv = false"></i>
            <div class="get-hongbao-tip text-center">
                <p class="color-fff f30">抢到红包啦</p>
                <p class="color-fff f30">快去我的红包看看吧！</p>
            </div>
            <div class="hongbao-to-account text-center">
                <p class="f24">红包已存入您的账户</p>
                <p class="f24">进个人中心-我的红包查看</p>
            </div>
            <div class="get-hongbao-bomb-btn" @click="hbSuccess = false,isMaskdiv = false"></div>
        </div>
        <!-- 领取（失败）红包弹框 -->
         <div class="fail-hongbao-bomb" v-show="hbReeor">
            <i class="icon-close" @click="hbReeor = false,isMaskdiv = false"></i>
            <div class="get-hongbao-tip text-center">
                <p class="f30">手速太慢了</p>
                <p class="f30">红包已经被抢光了</p>
            </div>
            <div class="get-hongbao-bomb-btn" @click="hbReeor = false,isMaskdiv = false"></div>
        </div>
        <!-- 领取（完毕）红包弹框 -->
         <div class="fail-hongbao-bomb" v-show="hbEnd">
            <i class="icon-close" @click="hbEnd = false,isMaskdiv = false"></i>
            <div class="get-hongbao-tip text-center">
                <p class="f30">您已领取此类红包</p>
                <p class="f30">请前往我的红包查看</p>
            </div>
            <div class="get-hongbao-bomb-btn" @click="hbEnd = false,isMaskdiv = false"></div>
        </div>
        <!-- 背景遮罩 -->
        <div class="maskdiv" v-show="isMaskdiv"></div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                nowTimes:'',
                hbSuccess: false,
                hbReeor: false,
                isMaskdiv: false,
                hbEnd: false,
                moneyList:[
                    {
                        "money":"5",
                        "time":8,
                        "num":"8000",
                        "class":"",
                        "click":false,
                        "monId": "CR20171206180124"
                    },
                    {
                        "money":"10",
                        "time":9,
                        "num":"6000",
                        "class":"",
                        "click":false,
                        "monId": "CR20171206180641"
                    },
                    {
                        "money":"20",
                        "time":10,
                        "num":"5000",
                        "class":"",
                        "click":false,
                        "monId": "CR20171206180928"
                    },
                    {
                        "money":"30",
                        "time":11,
                        "num":"4000",
                        "class":"",
                        "click":false,
                        "monId": "CR20171206181133"
                    },
                    {
                        "money":"50",
                        "time":12,
                        "num":"3000",
                        "class":"",
                        "click":false,
                        "monId": "CR20171206181305"
                    }
                ]
            }
        },
        components:{

        },
        watch:{

        },
        created(){
            this.nowTime()
        },
        mounted(){
           
        },
        methods:{
            // 获取系统当前时间
            nowTime () {
                let self = this
                self.$http.jsonp("https://yyh.5173.com/api/CloudVerification-cloudvalidate-service/rs/valOrder/query_order_validateState", {
                    params: {
                        valorderId: 1227,
                        times: "1497941705",
                        sign: '505e770097ebebbd5dc8aa3b3ad447d4'
                    },
                    jsonp: 'callback'
                }).then(data => {
                    self.nowTimes = data.body.json.currentTime
                    function add0(m) {
                        return m < 10 ? '0' + m : m
                    }   
                    var time = new Date(parseInt(self.nowTimes))
                    var y = time.getFullYear()
                    var m = time.getMonth() + 1
                    var d = time.getDate()
                    for (let i = 0; i < self.moneyList.length; i++) {
                        if (self.moneyList[i].time <= d) {
                            self.moneyList[i].class = ""
                            self.moneyList[i].click = true
                        } else {
                            self.moneyList[i].class = "over"
                        }
                    }
                })
            },
            // 判断用户是否登录
            isLogin (monId,click) {
                this.$getAccount().then(account => {
                    if (account == null) {
                        location.href = "/vue/login?returnUrl=" + encodeURIComponent(location.href)
                    } else {
                        this.packet(monId,click)
                    }
                })
            },
            // 红包
            packet (monId,click) {
                if (click) {
                    this.$http.post(this.$CONSTANTS.APIGoods + 'coupon/receiveCouponToUser',{coupon_rule_id:monId}).then(data => {
                        let result = JSON.parse(data.body.result)
                        if (result.ErrorCode === "COUPON_RULE_USER_RECEIVED"){  // 已经领取
                            this.isMaskdiv = true
                            this.hbEnd = true
                        } else if (result.ErrorCode === "") {   // 领取成功
                            this.isMaskdiv = true
                            this.hbSuccess = true
                        } else if (result.ErrorCode === "COUPON_RULE_RECEIVED_FINISHED") {  // 红包已领完
                            this.isMaskdiv = true
                            this.hbReeor = true
                        }
                    })
                }
            }
        }
    }
</script>
<style>
  @import "../../assets/css/fost-base.css";
  @import "../../assets/css/activities/huodg.css";
</style>
